<?php if (!defined('THINK_PATH')) exit();?><!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Listen美食城|美味小吃|营养丰富</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="format-detection" content="telephone=no">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="alternate icon" type="image/png" href="/Public/vendor/assets/i/favicon.png">
    <link rel="stylesheet" href="/Public/vendor/assets/css/amazeui.min.css"/>
    <style>
        .header {
            text-align: center;
        }

        .header h1 {
            font-size: 200%;
            color: #333;
            margin-top: 30px;
        }

        .header p {
            font-size: 14px;
        }

        .error {
            color: red;
        }

    </style>
</head>
<body>
<div class="header">
    <div class="am-g">
        <h1>Listen美食城后台登录页面</h1>
    </div>
    <hr/>
</div>
<div class="am-g">
    <div class="am-u-lg-4 am-u-md-6 am-u-sm-centered">
        <h3>登录
            <a href="<?php echo U('User/register');?>" class="am-btn am-btn-danger am-btn-sm" style="float: right;"> 注册</a>
        </h3>

        <hr>
        <div class="am-btn-group">
            <a href="#" class="am-btn am-btn-secondary am-btn-sm"><i class="am-icon-github am-icon-sm"></i> Github</a>
            <a href="#" class="am-btn am-btn-success am-btn-sm"><i class="am-icon-google-plus-square am-icon-sm"></i>
                Google+</a>
        </div>
        <br>
        <br>

        <form class="am-form" action="<?php echo U('User/login');?>" method="post">

            <div class="am-input-group">
                <span class="am-input-group-label"><i class="am-icon-user am-icon-fw"></i></span>
                <input type="text" name="username" id="username" class="am-form-field" placeholder="请输入用户名/手机号/邮箱"
                       autofocus>
            </div>
            <div></div>

            <br>
            <div class="am-input-group">
                <span class="am-input-group-label"><i class="am-icon-lock am-icon-fw"></i></span>
                <input type="password" id="password" name="password" class="am-form-field" placeholder="请输入密码">
                <span class="am-input-group-label"><i class="am-icon-eye-slash" id="ico" onclick="show()"></i></span>
            </div>
            <div></div>
            <div id="capital" style="display:none;color:red;">大写已开启</div>


            <br>
            <div class="am-input-group">
                <span class="am-input-group-label"><i class="am-icon-check am-icon-fw"></i></span>
                <input type="text" class="am-form-field" id="code" name="code" placeholder="请输入验证码"
                       style="width: 120px;float: left;">
                <img src="<?php echo U('User/verify');?>" class="verify" onclick="this.src='<?php echo U('User/verify');?>?' + Math.random();"
                     style="cursor: pointer;width: 120px;float: right;"/>
            </div>
            <div></div>

            <br>
            <label for="remember">
                <input id="remember" name="remember" value="1" type="checkbox"> 记住密码
            </label>
            <br/>
            <div class="am-cf">
                <input type="submit" value="登 录" class="submit am-btn am-btn-primary am-btn-sm am-fl">
                <a href="<?php echo U('User/password_reset');?>" class="am-btn am-btn-default am-btn-sm am-fr">忘记密码 ^_^? </a>
            </div>
        </form>

        <hr>
        <p>© 2014 AllMobilize, Inc. Licensed under MIT license.</p>
    </div>
</div>

<script src="/Public/vendor/assets/js/jquery-3.2.1.min.js"></script>

<!--登录验证-->
<script src="/Public/vendor/validate/jquery.validate.js"></script>
<script src="/Public/vendor/validate/localization/messages_zh.min.js"></script>

<script>
    // 登录验证
    $(".am-form").validate({
        onfocusout: function (element) {
            $(element).valid();
        },

        //指定错误信息显示的位置，在<div></div>中显示错误信息
        errorPlacement: function (error, element) {
            error.appendTo(element.parent().next());
        },

        rules: {
            username: {
                required: true,
                minlength: 5,
                maxlength: 20
            },
            password: {
                required: true,
                minlength: 6
            },
            code: {
                required: true,
                remote:"<?php echo U('check_verify');?>"
            },
        },

        /**
         * 自定义提示信息
         */
        messages: {
            username: {
                required: "请输入用户名"
            },
            password: {
                required: "请输入密码",
                minlength: "*密码不能小于6个字符"
            },
            code: {
                required: "请输入验证码",
                remote:"验证码不正确"
            },
        }
    })


    /*实现密码显示与隐藏设置 */
    function show() {
        var title = document.getElementById("ico").title;
        if (title == "隐藏密码") {
            document.getElementById("password").type = "password";
            document.getElementById("ico").title = "显示密码";
        } else {
            document.getElementById("password").type = "text";
            document.getElementById("ico").title = "隐藏密码";
        }
        $("#ico").toggleClass("am-icon-eye am-icon-eye-slash");
    }

    /* 检测输入框的大小写是否开启 */
    window.onload = function () {
        function isIE() {
            if (!!window.ActiveXObject || "ActiveXObject" in window) {
                return true;
            }
            else {
                return false;
            }
        }

        (function () {
            var inputPWD = document.getElementById('password');
            var capital = false;
            var capitalTip = {
                elem: document.getElementById('capital'),
                toggle: function (s) {
                    var sy = this.elem.style;
                    var d = sy.display;
                    if (s) {
                        sy.display = s;
                    }
                    else {
                        sy.display = d == 'none' ? '' : 'none';
                    }
                }
            }
            var detectCapsLock = function (event) {
                if (capital) {
                    return
                }
                ;
                var e = event || window.event;
                var keyCode = e.keyCode || e.which;
                var isShift = e.shiftKey || (keyCode == 16) || false;
                if (((keyCode >= 65 && keyCode <= 90) && !isShift) || ((keyCode >= 97 && keyCode <= 122) && isShift)) {
                    capitalTip.toggle('block');
                    capital = true
                }
                else {
                    capitalTip.toggle('none');
                }
            }
            if (!isIE()) {
                inputPWD.onkeypress = detectCapsLock;
                inputPWD.onkeyup = function (event) {
                    var e = event || window.event;
                    if (e.keyCode == 20 && capital) {
                        capitalTip.toggle();
                        return false;
                    }
                }
            }
        })()
    }


</script>
</body>
</html>